<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { width:100%; height: 100% }
        </style>


        <script type="text/javascript" src="js/key.js"></script>
        <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


        <script type="text/javascript"  src="js/table/media/js/jquery.js"></script>
        <script type="text/javascript"  src="js/table/media/js/jquery.dataTables.js"></script>

        <script type="text/javascript"  src="js/xhr.js"></script>

        <script type="text/javascript"  src="js/adminMap.js"></script>
        <script type="text/javascript"  src="js/globalZoneView.js"></script> 
        <script type="text/javascript"  src="js/smartlocksView.js"></script>
        <script type="text/javascript"  src="js/restitutionZoneView.js"></script>  

        <script type="text/javascript"  src="js/TableWithConsole.js"></script>  
        <script type="text/javascript"  src="js/simuTable.js"></script> 

        <link rel="stylesheet" type="text/css" href="css/contextMenu.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/css-table.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
        <script>

 

            /**
             * Create or update SL
             * Id SL Id is known, update existng SL
             * crete it, else. 
             */
            function createOrUpdateSmartlock() {
                saveSmartlock({
                    operator: $("#smartlockOp").val(),
                    lat: $("#smartlockLat").val(),
                    lng: $("#smartlockLng").val(),
                    reference: $("#smartlockRef").val(),
                    abonnement: $("#smartlockAbo").val(),
                    actif: $("#smartlockActif").val(),
                    id: eval($("#smartlockId").text())
                }, function() {
                    loadSL();
                });
            }

            function animate_sl() {
                var array = this;
                for (var i = 0; i < array.length; i++) {
                    var sl = array[i];
                    saveSmartlock({
                        operator: operator,
                        lat: eval(sl.lat) + 4 * ((2 * Math.round(Math.random())) - 1) * 0.0001,
                        lng: eval(sl.lng) + 4 * ((2 * Math.round(Math.random())) - 1) * 0.0001,
                        reference: sl.reference,
                        abonnement: sl.abonnement,
                        actif: sl.actif,
                        id: sl.id,
                    }
                    )
                }
            }
            function animateSmartlocks() {
                setInterval(function() {
                    animateSmartlocks_(load_simu_table_reporting)
                }, 3000);
            }


            function animateSmartlocks_() {
                operator = $("#smartlockOp").val();
                loadSmartlock(animate_sl);
            }

            function init() {
                $(document).ready(
                        function() {
                            operator = $("#smartlockOp").val();
                            init_simu_table_reporting();
                            loadSL();
                        }
                );
            }

            function loadSL() {
                operator = $("#smartlockOp").val();
                loadSmartlock(load_simu_table_reporting)
            }

            function checkRestitute() {
                var id = eval($("#smartlockId").text());
                if (id) {
                    XHRpost('rest/smartlocks/restitute', {
                        operator: $("#smartlockOp").val(),
                        id: eval($("#smartlockId").text())
                    }, function(rest) {
                        if (rest.length === 0) {
                            $("#restitutionMessage").html('Aucune restitution possible');
                        } else {
                            $("#restitutionMessage").html('Restitution possible dans la zone ' + rest['ZAR_reference']);
                        }
                    })
                } else {
                    alert('Aucun Smartlock selectionné.');
                }

            }

            function inGlobalZone() {
                var id = eval($("#smartlockId").text());
                if (id) {
                    XHRget('rest/smartlocks/inGlobalZone', {
                        operator: $("#smartlockOp").val(),
                        id: eval($("#smartlockId").text())
                    }, function(result) {
                        var data = JSON.parse(result);
                        if (data.result) {
                            $('#inGlobalZoneMessage').html("Smartlocks " + id + " DANS la zone globale");
                        } else {
                            $('#inGlobalZoneMessage').html("Smartlocks  " + id + " HORS zone globale");
                        }

                    })
                } else {
                    alert('Aucun Smartlock selectionné.');
                }

            } 
        </script> 
    </head>
    <body onload="init()"> 

        <div id="navigation">
            <ul> 
                <li>
                    Operateur ID: <input type="text" id="smartlockOp" value="25000">
                </li>

                <li> <a href="#" onclick="animateSmartlocks()">Animer les Smartlocks</a> 
                </li>

                <li> <a href="#" onclick="loadSL()">Rafraichir les Smartlocks</a> 
                </li>

            </ul>
        </div>




        <div id="header">
            <center>Simulateur de supervision - Smartlock</center>
        </div>





        <div style="height: 800px" id="content"> 

            <center>
                <table id="table_simu" class="display">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Reference</th>
                            <th>Lat</th>
                            <th>Lng</th>
                            <th>Abonnement</th>  
                            <th>Etat</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                </table>
            </center>

            <div class='modificationSL'>
                <h3>Creation/modification de Smartlocks</h3>
                <span>Creation d'un nouveau SL si l'ID n'existe.</span>
                <div> 
                    ID :<span id='smartlockId'></span> <button onclick="$('#smartlockId').html('')">Clear</button><br>
                    REF:<input type="text" id='smartlockRef' ><br>
                    ABO:<input type="text" id='smartlockAbo' > ACTIF (1=Oui, 0=Non):<input type="text" id='smartlockActif'><br> 
                    LAT:<input type="text" id='smartlockLat'> LNG:<input type="text" id='smartlockLng'>

                    <button value="Envoyer" onClick="createOrUpdateSmartlock()">Creer/Modifier</button>
                </div> 
            </div>  

            <div id='restitution'>
                <h3>Test de restitution</h3>
                <button value="checkRestitute" id='smartlockRestitute' onClick="checkRestitute()">Restitute</button>
                <div id='restitutionMessage'> 
                </div> 
            </div>  

            <div id='inGlobalZone'>
                <h3>Appartenance Zone Globale</h3>
                <button value="checkRestitute" id='inGlobalZone' onClick="inGlobalZone()">Test</button>
                <div id='inGlobalZoneMessage'> 
                </div> 
            </div>  
   
        </div>   
    </body>
</html> 